<script setup>
import {onMounted, reactive, ref} from "vue";
import {useRouter} from "vue-router";
import { login } from "../../api/user";
import {ElMessage} from "element-plus";

        const router = useRouter();
        const labelPosition = ref('top')
        onMounted(()=>{
          if(localStorage.getItem("token")){
            router.replace({
              path:"/"
            })
          }
        })
        const LoginForm=reactive({
          username:"",
          password:""
        })

        function handle_login(){
          login(this.LoginForm).then(response=>{
                if (response.data.code===200){
                    this.router.replace({
                        path:'/',
                    })
                  localStorage.setItem("token",JSON.stringify(response.data.data))
                }else{
                    //TODO 将报错数据显示到输入框下面
                    ElMessage.error(response.data.msg)
                }
            },reason => {
                console.log(reason)
            })
        }
</script>

<template>
<div class="login">
   <!-- :model="loginStore" -->

  <el-form
      :label-position="labelPosition"
      label-width="100px"   
      size="large"
      class="loginForm"
  >
    <h2>云电子胶片管理端</h2>
    <el-form-item label="账号">
      <el-input v-model.trim="LoginForm.username"
                placeholder="请输入账号" size="large"
      />
    </el-form-item>
    <el-form-item label="密码">
      <el-input v-model.trim="LoginForm.password"
                type="password"
                show-password
                placeholder="请输入八位密码" size="large"
      />
    </el-form-item>
    <el-button type="primary"  size="large" @click="handle_login()">
      登录
    </el-button>
  </el-form>
</div>
</template>



<style>
.login{
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  background-image: url("../../../public/images/city-windows_FXUKMM5OVS.webp");
  background-size:100% 100%;
  background-attachment:fixed;

}
.loginForm{
  min-width: 460px;
  min-height: 370px;
  /*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content:space-around;
  font-weight:bold ;
  background-color: #fff;


}

</style>